<template>
	<view class="common-title">
		<view class="v-back" v-if="showBack" @click="back()">
			<image src="/static/icon_back.png" class="img-back"></image>
			<view class="text-back">返回</view>
			<view class="v-line"></view>
		</view>
		<view class="title">{{title}}</view>

	</view>
</template>

<script>
	export default {
		name: "common-title",
		props: {
			title: {
				type: String, // 定义类型为字符串
				default: "" // 默认值
			},
			showBack: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			back() {
				console.log("点击了返回按钮");
				// 在这里实现返回逻辑
				uni.navigateBack(); // 例如：调用 UniApp 的返回上一页方法
			}
		}
	}
</script>
<style lang="less" scoped>
	@vw: 8.015vw;
	@vh: 5.4vh;

	.common-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 16/@vh;
		padding-bottom: 16/@vh;
		padding-left: 12/@vw;
		font-size: 13/@vh;
		width: 300/@vw;
	

		.v-back {
			display: flex;
			flex-direction: row;
			align-items: center;

			.img-back {
				width: 22/@vw;
				height: 22/@vw;
			}

			.text-back {
				margin-left: 11/@vw;
				white-space: nowrap;
				/* 强制文本一行显示 */
				overflow: hidden;
				text-overflow: ellipsis;

			}

			.v-line {
				margin-left: 11/@vw;
				width: 0.5/@vw;
				height: 12/@vh;
				color: #D9D9D9;
				background-color: #D9D9D9;

			}
		}



		.title {
			margin-left: 11/@vw;
	white-space: nowrap;
		/* 强制文本一行显示 */
		overflow: hidden;
		text-overflow: ellipsis;

		}
	}
</style>